<template>
  <div>
    <section class="main">
      <input
        id="toggle-all"
        :checked="all"
        class="toggle-all"
        type="checkbox"
        @click="quanxuan"
      />
      <label for="toggle-all">全部标记为已完成</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <!-- 新语法  :class="{ completed: item.isDone }" class 可以写成对象格式 
        ❗❗❗  { 键 : 值 } : 值如果为 true 我就加上这个类名 fasle 不加
         -->
        <li
          :class="{ completed: item.isDone }"
          v-for="item in list"
          :key="item.id"
        >
          <div class="view">
            <input
              @click="cut(item.id, $event)"
              class="toggle"
              type="checkbox"
              :checked="item.isDone"
            />
            <label>{{ item.name }}</label>
            <button @click="$emit('del', item.id)" class="destroy"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: "SecTion",
  props: {
    list: {
      type: Array
    },
    all: {
      type: Boolean
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击是否完成
    cut (id, e) {
      this.$emit('cut', id, e.target.checked)
    },
    // 点击全选
    quanxuan (e) {
      // console.log(e.target.checked)
      this.$emit('quanxuan', e.target.checked)
    }
  },

}
</script>

<style lang='' scoped>
</style>